<template>
  <div class="home-wrapper">
    <div class="home">
      <homeSearch></homeSearch>
      <main>
        <!-- 轮播图 -->
        <div class='swiper'>
          <mt-swipe :auto="4000">
            <mt-swipe-item v-for='imgsrc in imgSrc' :key='imgsrc.id'>
              <a href="#"><img class="sc-kAzzGY dChoOW" :src="imgsrc.pic"></a>
            </mt-swipe-item>
          </mt-swipe>
        </div>
        <!-- 导航 -->
        <div class='home-nav'>
          <ul>
            <router-link tag='li' keep-alive to=''>
              <img src='https://goods4.juancdn.com/jas/181119/7/6/5bf2524bb6f8ea534d206f83_270x241.png?imageMogr2/quality/85!/format/png'>
            </router-link>
            <router-link tag='li' keep-alive to=''>
              <img src='https://goods8.juancdn.com/jas/181228/f/e/5c25bd0d33b08962a220f3a6_270x241.png?imageMogr2/quality/85!/format/png'>
            </router-link>
            <router-link tag='li' keep-alive to=''>
              <img src='https://goods2.juancdn.com/jas/180201/3/d/5a727415a9fcf8280d24465a_270x241.png?imageMogr2/quality/85!/format/png'>
            </router-link>
            <router-link tag='li' keep-alive to=''>
              <img src='https://goods4.juancdn.com/jas/180917/6/5/5b9f175033b08945a870ad21_270x241.png?imageMogr2/quality/85!/format/png'>
            </router-link>
          </ul>
        </div>
    
        <!-- 活动 -->
        <div class='home-activity'>
          <div class='home-activity-top'>
            <div class='home-activity-left'>
              <router-link tag='div' keep-alive to=''>
                <img src='https://s2.juancdn.com/jas/190225/2/2/5c7342d333b0892424614f64_540x656.gif'>
              </router-link>
            </div>
            <div class='home-activity-right'>
              <router-link tag='div' keep-alive to=''>
                <img src='https://goods4.juancdn.com/jas/190222/6/e/5c6fbb0d33b08960a073a190_540x328.png?imageMogr2/quality/85!/format/png'>
              </router-link>
              <router-link tag='div' keep-alive to=''>
                <img src='https://goods7.juancdn.com/jas/190220/d/b/5c6d21f4b6f8ea1aff1bb94c_540x328.png?iopcmd=convert&Q=85&dst=png'>
              </router-link>
            </div>
          </div>
        <router-link tag='div' keep-alive to='' class='home-activity-bottom'>
            <img src='https://s2.juancdn.com/jas/190225/b/8/5c73ad5933b08959325a53ab_1080x364.gif'>
          </router-link>
    
        </div>
        <!-- 精选好货 -->
        <div class='home-choice'>
          <div class='home-choice-banner'>
            <img src='https://goods7.juancdn.com/jas/180518/c/6/5afe2f0db6f8ea096f2bfb35_1080x138.png?iopcmd=convert&Q=85&dst=png'>
          </div>
          <div class='choice-box' >
            <ul class='choice-list' :class='[ ceilingFlag ? "fix" :""]'>
              <router-link tag='li' active-class='active' keep-alive to='/home/choicespecial'>精选专场</router-link>
              <router-link tag='li' active-class='active' keep-alive to='/home/choicesingle'>精选单品</router-link>
            </ul>
            <router-view></router-view>
          </div>
        </div>

        
      </main>
    </div>
   
  </div>
</template>

<script>
  import homeSearch from 'components/commons/homeSearch'
  import axios from 'axios'
  import BScroll from 'better-scroll'
  import { Indicator , Toast } from 'mint-ui';


  
  export default {
    name: 'home',
    data() {
      return {
        imgSrc: null,
        ceilingFlag : false,
      }
    },
    components: {
      homeSearch
    },
    created() {
      Indicator.open({
          text: '加载中~',
          spinnerType: 'fading-circle'
      });
      axios.get('/api/getIndexFirstPaintInfo', {
          params: {
            cid: '',
            zy_ids: 'p8_c4_l4',
            app_name: 'zhe',
            app_version: '',
            platform: '',
            catname: 'newest_zhe'
          }
        })
        .then(res => {
          this.imgSrc = res.data.adsInfo.slide_ads.config.slide
          Indicator.close();

        })
        .catch(err => console.log(err))
    }
  }
</script>

<style lang="stylus">
@import '~assets/styles/_base.styl'
.home-wrapper
  width 100%
  height 100%
  overflow hidden
  .home
    width 100%
    display flex
    flex-direction column
    homeSearch
        height .88rem
    main 
      flex 1
      .swiper
        width 100%
        height 2.9rem
        .mint-swipe
          width 100%
          height 100%
          .mint-swipe-items-wrap
            width 100%
            height 100%
            .mint-swipe-item
              width 100%
              height 100%
              a
                display inline-block
                width 100%
                height 100%
                img 
                  width 100%
                  height 100%
          .mint-swipe-indicators
            .mint-swipe-indicator
              width .16rem
              height .16rem
              &.is-active
                width .32rem
                opacity 1
                border-radius .1rem
      .home-nav
        ul
          display flex
          li
            flex 1
            img
              width 1.87rem
              height 1.67rem
      .home-activity-bottom
        width 100%
        img
          width 100%
      .home-activity-top
        width 100%
        height 4.55rem
        display flex
        margin-top: -2px;
        .home-activity-left
          flex 1
          div 
            width 100%
            img
              width 100%
        .home-activity-right
          flex 1
          div 
            width 100%
            img
              width 100%
  //精选
  .home-choice
    .home-choice-banner
      margin .2rem 0
      img 
        width 100%
    .choice-box
      background #fff
      .choice-list
        height .88rem
        display flex
        &.fix
          position fixed
          top 0
          left 0
        li
          width 1.28rem
          margin 0 .2rem
          text-align center
          color #333
          font-size .32rem
          font-weight 500
          line-height .82rem
          box-sizing border-box 
          &.active
            border-bottom 4px solid #ff464e
            color $bg-color

</style>